import { Input } from 'antd';
import { Button,Avatar } from 'antd';
import { EditOutlined } from '@ant-design/icons';
import {Link} from 'react-router-dom'
import './index.less'
import store from '../../redux/store'
const { Search } = Input;

export default function NavHeader(){

  const userData = store.getState().user.user
  console.log('userData',userData)
  // console.log('wwww',store.getState().user)

  // store.dispatch(addLoginUser({loginUser:173117003}))

  const onSearch = ()=>{

  }

  return (
    <div className="nav-header-container flex-center cardBox">
      <div className='header-center flex-between'>
        <div>
          <Link to="/member" className='headerLogo'>JimmyBlog</Link>
          <span className="baseColor">专注前端开发，大家一起进步！</span>
        </div>
        <div className="baseColor flex-center">
          <div className="searchBar">
            <Search placeholder="input search text" onSearch={onSearch} enterButton />
          </div>
          {store.getState().user?<Link to="/member"><Avatar className="userAva" src={userData.header} /></Link>:<Link className="login cursor" to="/login">登录/注册</Link>}
          <div className="login cursor">收藏</div>
          <Button
            type="primary"
            icon={<EditOutlined />}
            onClick={() => {}}
          >
            写博客
          </Button>
        </div>
      </div>
    </div>
  )
}